<template>
    <input type="file" :accept="props.accept" @change="onChanged" ref="inputRef" style="display: none;" />
    <el-button @click="onClickOpen" class="ml5" type="primary">{{ props.name }}</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';


interface Props {
    name: string,
    accept: string,
}

const emit = defineEmits<{
    opend: [string, Uint8Array]
}>();

const props = defineProps<Props>();
const inputRef = ref<HTMLInputElement | null>(null);

function onClickOpen() {
    inputRef?.value?.click();
}

async function onChanged(event: Event) {
    const input = event.target as HTMLInputElement;
    const fs = input.files;
    if (fs == null) {
        return;
    }
    if (fs.length <= 0) {
        return;
    }
    const file = fs.item(0);
    if (file == null) {
        return;
    }
    const body = await file.arrayBuffer();
    const data = new Uint8Array(body);
    input.value = '';
    emit('opend', file.name, data);
}

</script>
